<template>
  <div>
    <h1><span>商品管理</span> <el-button @click="goadd">添加商品</el-button></h1>
    <el-form ref="form" :model="form" class="form">
      <el-form-item>
        <el-select v-model="form.region" placeholder="按商品id查询" class="inp">
          <el-option label="按id查询" value="2"></el-option>
          <el-option label="按商品名称查询" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="订单号" v-model="form.name"></el-input>
      </el-form-item>
      <el-button type="primary" class="btn" @click="search">查询</el-button>
    </el-form>
    <el-table :data="list" stripe style="width: 100%">
      <el-table-column prop="id" label="id" width="60%"> </el-table-column>
      <el-table-column prop="subtitle" label="信息"> </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <div v-show="scope.row.status == 1">
            <span style="margin: 5px;">在售</span
            ><button class="but" @click="up(scope.row)">下架</button>
          </div>
          <div v-show="scope.row.status == 2">
            <span style="margin: 5px;">已下架</span
            ><button class="but" @click="up(scope.row)">上架</button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span class="sp" @click="detail(scope.row)">查看</span>
          <span class="sp" @click="edit(scope.row)">编辑</span>
        </template>
      </el-table-column>
    </el-table>
    <myPagination :total="total" @pageChange="change" />
  </div>
</template>

<script>
import { goods, shopName, shopId, changestatus } from "@/utils/api";
import myPagination from "@/components/pagination";
export default {
  name: "",
  components: {
    myPagination
  },
  data() {
    return {
      list: [],
      currentPage: 1,
      total: 0,
      form: {
        name: "",
        region: ""
      }
    };
  },
  mounted() {
    goods(this.currentPage).then(res => {
      this.list = res.data.data.list;
      this.total = res.data.data.total;
    });
  },
  methods: {
    edit(val){
      this.$router.push({path:'/editgoods',query:{id:val.id}})
    },
    detail(val){
      console.log(val);
      this.$router.push({path:'/goodsdetail',query:{id:val.id,categoryId:val.categoryId}})
    },
    change(val) {
      goods(val).then(res => {
        this.list = res.data.data.list;
      });
    },
    search() {
      if (this.form.region == "1") {
        shopName(this.form.name).then(res => {
          this.list = res.data.data.list;
          this.total = res.data.data.total;
        });
      } else {
        shopId(this.form.name).then(res => {
          this.list = res.data.data.list;
          this.total = res.data.data.total;
        });
      }
    },
    up(val) {
      if (val.status == 1) {
        changestatus(val.id, 2).then(res => {
          if (res.data.status == 0) {
            alert(res.data.data);
            goods(this.currentPage).then(res => {
              this.list = res.data.data.list;
              this.total = res.data.data.total;
            });
          } else {
            alert("状态更改失败");
          }
        });
      } else {
        changestatus(val.id, 1).then(res => {
          if (res.data.status == 0) {
            alert(res.data.data);
            goods(this.currentPage).then(res => {
              this.list = res.data.data.list;
              this.total = res.data.data.total;
            });
          } else {
            alert("状态更改失败");
          }
        });
      }
    },
    goadd(){
      this.$router.push('/goodsadd')
    }
  }
};
</script>

<style lang="scss" scoped>
h1 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  span {
    width: 20%;
  }
  .el-button {
    width: 10%;
    background-color: #338dcc;
    color: #fff;
  }
}
.form {
  display: flex;
}
.inp {
  width: 160px;
  margin-right: 20px;
}
.btn {
  width: 100px;
  height: 40px;
  margin-left: 10px;
}
.sp {
  display: inline-block;
  width: 40%;
  color: #338dcc;
}
.but {
  outline: none;
  width: 40px;
  padding: 1px;
  border: none;
  border-radius: 5px;
  background-color: #f0ad4e;
  color: #ffffff;
}
</style>
